<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能体列表 - AI智能体开发平台</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="za.css">
    <!-- 使用 layui 自带图标 -->
</head>
<body style="background-color: #FFFFFF; margin: 0; padding: 20px;">
    <div class="page-header" style="margin-bottom: 20px;">
        <h2>智能体列表</h2>
        <p style="color: #909399; margin-top: 8px;">管理和使用您的AI智能体</p>
    </div>
    
    <div class="page-toolbar" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
        <div class="search-box">
            <input type="text" class="za-input" placeholder="搜索智能体名称" style="width: 300px;">
            <button class="za-btn za-btn-primary" style="margin-left: 10px;">
                <i class="layui-icon layui-icon-search"></i> 搜索
            </button>
        </div>
        <div class="action-buttons">
            <button class="za-btn za-btn-primary">
                <i class="layui-icon layui-icon-addition"></i> 创建智能体
            </button>
        </div>
    </div>
    
    <div class="filter-options" style="margin-bottom: 20px; display: flex; gap: 10px;">
        <button class="za-btn za-btn-primary">我的智能体</button>
        <button class="za-btn za-btn-secondary">公开智能体</button>
        <button class="za-btn za-btn-secondary">全部智能体</button>
    </div>
    
    <div class="layui-row layui-col-space20">
        <!-- 智能体卡片1 -->
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
            <div class="layui-card za-agent-card">
                <div class="layui-card-body">
                    <h3 class="za-agent-name">客服助手</h3>
                    <div class="za-agent-meta">
                        <span>创建者：管理员</span>
                        <span class="za-tag za-tag-public">公开</span>
                    </div>
                    <p class="za-agent-desc">专业的客服智能助手，能够回答用户常见问题，提供产品信息和服务支持。</p>
                    <div class="za-agent-actions">
                        <a href="agent-create.html?id=1" class="za-btn za-btn-sm za-btn-secondary"><i class="layui-icon layui-icon-edit" style="margin-right: 5px;"></i>编辑</a>
                        <button class="za-btn za-btn-sm za-btn-danger"><i class="layui-icon layui-icon-delete" style="margin-right: 5px;"></i>删除</button>
                        <button class="za-btn za-btn-sm za-btn-primary"><i class="layui-icon layui-icon-dialogue" style="margin-right: 5px;"></i>对话</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 智能体卡片2 -->
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
            <div class="layui-card za-agent-card">
                <div class="layui-card-body">
                    <h3 class="za-agent-name">代码助手</h3>
                    <div class="za-agent-meta">
                        <span>创建者：张三</span>
                        <span class="za-tag za-tag-private">私有</span>
                    </div>
                    <p class="za-agent-desc">帮助开发人员编写、优化和调试代码，支持多种编程语言。</p>
                    <div class="za-agent-actions">
                        <a href="agent-create.html?id=2" class="za-btn za-btn-sm za-btn-secondary">编辑</a>
                        <button class="za-btn za-btn-sm za-btn-danger">删除</button>
                        <button class="za-btn za-btn-sm za-btn-primary">对话</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 智能体卡片3 -->
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
            <div class="layui-card za-agent-card">
                <div class="layui-card-body">
                    <h3 class="za-agent-name">学习助手</h3>
                    <div class="za-agent-meta">
                        <span>创建者：李四</span>
                        <span class="za-tag za-tag-public">公开</span>
                    </div>
                    <p class="za-agent-desc">辅助学习的智能工具，可以解释概念、提供学习建议和练习题目。</p>
                    <div class="za-agent-actions">
                        <a href="agent-create.html?id=3" class="za-btn za-btn-sm za-btn-secondary">编辑</a>
                        <button class="za-btn za-btn-sm za-btn-danger">删除</button>
                        <button class="za-btn za-btn-sm za-btn-primary">对话</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 智能体卡片4 -->
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
            <div class="layui-card za-agent-card">
                <div class="layui-card-body">
                    <h3 class="za-agent-name">创意写作助手</h3>
                    <div class="za-agent-meta">
                        <span>创建者：王五</span>
                        <span class="za-tag za-tag-private">私有</span>
                    </div>
                    <p class="za-agent-desc">激发创意灵感，帮助创作文章、故事、诗歌等各类文学作品。</p>
                    <div class="za-agent-actions">
                        <a href="agent-create.html?id=4" class="za-btn za-btn-sm za-btn-secondary">编辑</a>
                        <button class="za-btn za-btn-sm za-btn-danger">删除</button>
                        <button class="za-btn za-btn-sm za-btn-primary">对话</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="pagination" style="margin-top: 30px; text-align: center;">
        <div class="layui-box layui-laypage layui-laypage-default">
            <a href="javascript:;" class="layui-laypage-prev layui-disabled">上一页</a>
            <span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span>
            <a href="javascript:;">2</a>
            <a href="javascript:;">3</a>
            <span class="layui-laypage-spr">...</span>
            <a href="javascript:;">10</a>
            <a href="javascript:;" class="layui-laypage-next">下一页</a>
        </div>
    </div>

    <script src="layui/layui.js"></script>
    <script>
        layui.use(['jquery'], function() {
            var $ = layui.jquery;
            
            // 智能体卡片点击事件
            $('.za-agent-card').on('click', function(e) {
                // 避免点击按钮时触发卡片点击事件
                if (!$(e.target).closest('.za-agent-actions').length) {
                    // 跳转到智能体详情页
                    // window.location.href = 'agent-detail.html?id=' + $(this).data('id');
                    console.log('点击了智能体卡片');
                }
            });
            
            // 按钮点击事件
            $('.za-agent-actions button').on('click', function(e) {
                e.stopPropagation(); // 阻止事件冒泡
                var action = $(this).text().trim();
                console.log('执行操作：', action);
            });
        });
    </script>
</body>
</html>